<!--
 * @Description: 饼图
 * @Author: Ronda
 * @Date: 2022-02-16 09:30:06
 * @LastEditors: Ronda
 * @LastEditTime: 2022-05-23 15:28:51
-->
<template>
  <div>
      <div ref="c221" style="height: 250px;text-align: center;"></div>
  </div>
</template>
<script>
import { Pie } from '@antv/g2plot';
import { get } from '@/utils/request'
export default {
  data() {
      return {
          empData:[]
      }
  },
  methods: {
      loadPie() {
          const piePlot = new Pie(this.$refs.c221, {
              appendPadding: 10,
              data:this.empData,
              angleField: 'value',
              colorField: 'type',
              color:({type})=>{
                  if(type == '在线'){
                      return '#a2a6ec'
                  }
                  return '#d07f7a'
              },
              radius: 0.8,
              innerRadius: 0.6, 
              // 图例属性 
              legend:{
                  itemName:{
                      style:{
                          fill:'black',
                          fontSize: 15,
                      }
                  }
              },
              // 文本
              label: {
                  type: 'outer',
                  content:'{name}',
                  style: {
                      fill: 'black',
                      fontSize: 15,
                  }
              },
              statistic: {
                  title: {
                      style: {
                          color: 'black',
                          fontSize: 16,
                          fontWeight: 'bold'
                      },
                      content: '设备总数'
                  },
                  content: {
                      style: {
                          color: 'black',
                          fontSize: 24,
                          fontWeight: 'bold'
                      },
                      formatter: (_, data) => {
                          if (!data) return '0';
                          const total = data.reduce((sum, item) => sum + item.value, 0);
                          return `${total}`;
                      }
                  }
              },
              interactions: [{ type: 'element-selected' }, { type: 'element-active' }],
          });

          piePlot.render();
      },
      async getEmpData() {
          let res = await get('/dashboard/queryDeviceOnlineNumber');
          console.log(res,'获取响应');
          this.empData = res.data;
      }
  },
  async mounted() {
      await this.getEmpData();
      this.loadPie()
  }
}
</script>
<style scoped>
</style>